<template>
  <div>
    <gs-header :title="pageTitle"/>
    <div class="page-slide-wrapper">
      <div class="slide-content">
        <slide
          ref="slide"
          :autoPlay="isAutoPlay"
          :loop="isLoop"
          :showDot="isShowDot"
          :interval="interval"
          :speed="speed"
          :threshold="threshold"
        >
          <div v-for="(item,index) in data" :key="index" class="slide-item">
            <a :href="item.linkUrl">
              <img :src="item.picUrl">
            </a>
          </div>
        </slide>
      </div>
    </div>
  </div>
</template>

<script>
import Slide from 'example/components/slide/slide'
import GsHeader from 'example/components/gs-header/gs-header'

const items = [
  [
    {
      linkUrl: 'http://y.qq.com/w/album.html?albummid=0044K2vN1sT5mE',
      picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg'
    },
    {
      linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2197820&g_f=shoujijiaodian',
      picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg'
    }
  ],
  [
    {
      linkUrl: 'http://y.qq.com/w/album.html?albummid=001tftZs2RX1Qz',
      picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M00000236sfA406cmk.jpg'
    },
    {
      linkUrl: 'https://y.qq.com/msa/218/0_4085.html',
      picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001s0BXx3Zxcwb.jpg'
    },
    {
      linkUrl: 'https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2195876&g_f=shoujijiaodian',
      picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000002cwng4353HKz.jpg'
    }
  ]
]

export default {
  name: 'PageSlide',
  computed: {
    data () {
      return items[this.index]
    }
  },
  data () {
    return {
      pageTitle: '水平轮播',
      index: 1,
      isAutoPlay: true,
      isLoop: true,
      isShowDot: true,
      interval: 3000,
      speed: 400,
      threshold: 50
    }
  },
  components: {
    Slide,
    GsHeader
  },
  mounted () {
    this.$refs.slide.init()
  }
}
</script>

<style lang="scss">
.page-slide-wrapper {
  position: relative;
  width: 100%;
  padding-top: 40%;
  margin-bottom: 10px;
  overflow: hidden;
  .slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
